<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>天津大学国有资产管理系统</title>
    <!--<link rel="icon" href="__STATIC__/imgs/tj.jpg" type="image/x-icon" />-->
    <link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="__STATIC__/sweetalert/sweetalert-dev.js"></script>
    <link href="__STATIC__/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="__STATIC__/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/jquery.form.min.js"></script>
    <script src="__STATIC__/bootstrap/js/bootstrap.min.js"></script>
    <link href="__STATIC__/style.css" rel="stylesheet">
    <link href="__STATIC__/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <script src="__STATIC__/bootstrap-table/bootstrap-table.js"></script>
    <script src="__STATIC__/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <link href="__STATIC__/flatpicker/flatpicker.css" rel="stylesheet">
    <script src="__STATIC__/flatpicker/flatpicker.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>
    <script src="__STATIC__/js/common.js"></script>
    <link rel="stylesheet" href="__STATIC__/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<style>
    html{
        background-color: #f9f9f9;
    }
    .top{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 45px;
        background-color: rgb(67, 142, 185);
        color: white;
        z-index: 100;
    }
    .title{
        /*width: 200px;*/
        height: 45px;
        line-height: 45px;
        color: white;
        font-size: 20px;
        padding-left: 10px;
        /*font-weight: bold;*/
        /*margin-left: 10px;*/
    }
    .user{
        height: 45px;line-height: 45px;
        float: right;
        padding-right: 20px;
        margin-top: -45px;
        color: white;
    }
    .footer {
        position: fixed;
        left: 200px;
        right: 0;
        bottom: 0;
        height: 34px;
        line-height: 34px;
        padding: 0 15px;
        background-color: #f2f2f2;
        text-align: center;
        color: #585858;
        font-size: 14px;
    }
    .content-body{
        position: fixed;
        top:45px;
        bottom: 34px;
        left: 200px;
        right: 0;
        /*background-color: white;*/
        padding: 10px;
        padding-bottom: 0px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .nav ul{padding: 0;margin: 0;list-style: none}
    .nav{
        width: 200px;
        transition: all .3s;
        position: fixed;
        top:45px;
        left: 0;
        bottom: 0;
        overflow-x: hidden;
        z-index: 1000;
        background-color:#F2F2F2;
        border-right: 1px solid #ccc;
    }
    .nav-scroll{width: 220px;height: 100%;position: relative;overflow-x: hidden}
    .nav-tree{width: 200px;}
    .nav a{display: block;overflow: hidden;padding-left: 20px;line-height: 38px;max-height: 38px;color: #585858;transition: all .3s;text-decoration: none}
    .nav a:hover{text-decoration: none;}
    .nav-item{position: relative;border-top: 1px solid #fcfcfc;border-bottom: 1px solid #e5e5e5;}
    .nav-item.nav-show{border-bottom: none;}
    .nav-item ul{display: none;background: #FAFAFA;}
    .nav-item.nav-show ul{display: block;}
    .nav-item:before{content: "";position: absolute;left: 0px;width: 3px;height: 38px;background: #34A0CE;opacity:0;transition: all .3s;}
    .nav-item:hover:before{opacity:1;}
    .nav-item:hover{background-color: white}
    .nav-more{float:right;margin-right: 20px;margin-top: 15px;transition: transform .3s;width: 8px;height:8px;
        border-bottom: 1px solid #ABB1B7;border-right: 1px solid #ABB1B7;transform: rotate(-45deg);}
    .nav-show .nav-more{transform:rotate(45deg);}
    .nav-show>a{color: #1963aa;background-color: #fafafa;}
    .nav-item li:hover a{color: #1963aa;}
    .nav-show ul{background-color: white;border-top: 1px solid #e5e5e5;}
    .nav-show li{border-bottom: 1px dotted #e5e5e5;padding-left: 15px;}
    .nav-show li:last-child{border-bottom: 1px solid #e5e5e5;}

    .nav-li-show a{color: #1963aa;font-size: 0.9em}

    @media screen and (max-width: 992px) {
        .nav{left:-200px}
        .content-body{left: 0px;}
        .footer{left: 0px}
        .site-mobile .nav{left: 0;transition: 0.3s}
        .site-mobile #site-mobile-shade{
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            z-index: 998;
        }
        .top-title{display: none}
    }
</style>
<body style="background-color: white;height: 100%;">

<div class="top">
    <div id="title" class="title">
        <img style="height: 45px;margin-top: -2px;" src="__STATIC__/imgs/tju.png">
        <span class="top-title">天津大学国有资产管理系统</span>
    </div>
    <div class="user">
        <div class="dropdown" style="display: inline">
            <span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                {$Think.session.user_name}&nbsp;&nbsp;{$role.NAME} <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right">
                {volist name='userRoles' id='vo'}
                <li><a href="{:url('index/login/changeRole')}?roleId={$vo.ROLE_ID}">切换为：{$vo.NAME}</a></li>
                {/volist}
                <li><a href="{:url('index/login/logout')}">注销</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="nav">
    <div class="nav-scroll">
        <ul class="nav-tree">
            {volist name='menu' id='vo1'}
            <li class="nav-item {eq name='vo1.show' value='1'}nav-show{/eq}">
                <a href="{notempty name='vo1.PAGE_URL'}__PUBLIC__/{$vo1.PAGE_URL}{else /}javascript:;{/notempty}">
                    <span class="{$vo1.ICON}" aria-hidden="true"></span>
                    <span style="margin-left: 5px;">{$vo1.PAGE_NAME}</span>
                    {notempty name='vo1.menu2'}
                    <i class="nav-more"></i>
                    {/notempty}
                </a>
                <ul>
                    {volist name='vo1.menu2' id='vo2'}
                    <li class="{$vo2.show?'nav-li-show':''}">
                        <a href="__PUBLIC__/{$vo2.PAGE_URL}">
                            <span class="fa fa-leaf"></span>
                            <span style="margin-left: 5px;">{$vo2.PAGE_NAME}</span>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </li>
            {/volist}
            <li style="height: 100px;"></li>
        </ul>
    </div>
</div>

<div class="content-body">
    {__CONTENT__}
</div>

<div id="site-mobile-shade"></div>

<div class="footer">
    @2018 copyright 天津大学资产处
</div>

</body>

<script>
    $(function(){
        // nav收缩展开
        $('.nav-item>a').on('click',function(){
            if( !$(this).parent('li').hasClass('nav-show')){
                // if ($(this).next().css('display') == "none") {
                //展开未展开
                $('.nav-item').children('ul').slideUp(300);
                $(this).next('ul').slideDown(300);
                $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
            }else{
                //收缩已展开
                $(this).next('ul').slideUp(300);
                $('.nav-item.nav-show').removeClass('nav-show');
            }
        });

        $("#title").on('click',function (e) {
            var w1 = document.body.clientWidth;
            if(w1 <= 992){
                document.body.classList.add('site-mobile');
            }
        })

        $("#site-mobile-shade").on('click',function (e) {
            document.body.classList.remove('site-mobile');
        })
    });

    function formatDateTime1(inputTime) {
        var time = parseInt(inputTime)*1000;
        if(isNaN(time) || time <= 0){
            return '';
        }
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
    };

    function formatDateTime2(inputTime) {
        var time = parseInt(inputTime)*1000;
        if(isNaN(time) || time <= 0){
            return '';
        }
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        return y + '-' + m + '-' + d+' '+h+':'+minute;
    };

    function formatDateTime3(inputTime) {
        var time = parseInt(inputTime)*1000;
        if(isNaN(time) || time <= 0){
            return '';
        }
        var date = new Date(time);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };


</script>
</html>